<template>
  <el-form label-position="left"
           :model="data" label-width="100px"
           ref="form"
           style="margin: 10px; width: auto"
  >
    <el-form-item class="form_item" prop="qtType" label="*资料名称">
      <el-input v-model="data.dataBankName"></el-input>
    </el-form-item>
    <el-form-item class="form_item" prop="qtType" label="标签分类">
      <el-input v-model="data.dataBankTag"></el-input>
    </el-form-item>

    <el-form-item class="form_item" prop="qtType" label="描述">
      <el-input style="height: 144px; " v-model="data.dataBankDesc"></el-input>
    </el-form-item>

    <el-form-item>
      <div class="w_full flex-row center-center" style="margin-top: 32px;">
        <el-button size="large" type="primary" @click="btn_click_ok">创建</el-button>
      </div>
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
import {reactive, ref} from "vue";
import {useRoute} from "vue-router";
import msg from "@/components/msg";
import {api_addDataBank} from "@/request/apis/dataBankApi";
import {DataBankInfoVO} from "@/type/vo/DataBankInfoVO";


const route = useRoute();
const emit = defineEmits(["close"])

console.log('route', route);
console.log('route.query', route.query);
console.log('route.params', route.params);
const userIdPara = route.query.userId as string;

const data = reactive({
  trainName: '',
  trainDate: '',
  trainEndDate: '',
  trainTeacher: '',
  trainDesc: '',
  fileList: [],
  dataBankName: '',
  dataBankDesc: '',
  dataBankTag: '',
})

const btn_click_ok = async () => {
  const dataBank: DataBankInfoVO = {
    dataName: data.dataBankName,
    dataDesc: data.dataBankDesc,
    tagId: data.dataBankTag,
  };
  const r = await api_addDataBank(dataBank);
  if (!r) {
    await msg.error("数据异常");
    return;
  }
  if (r.code != 0) {
    await msg.error(`数据异常!  ${r.code} msg：${r.msg}`);
    return;
  }
  emit("close", true, r.data);
}

</script>

<style scoped>
.form_item {
  margin-top: 16px;
}


.infinite-list .infinite-list-item {
  display: flex;
  align-items: center;
  justify-content: center;
  background: black;
  margin: 10px;
  color: var(--el-color-primary);
  overflow: hidden;
}

.infinite-list .infinite-list-item + .list-item {
  margin-top: 10px;
}

</style>

